<template>
	<div class="bankCardSet">
		<HeaderTop :title="titleFonts"></HeaderTop>
		<!--		银行卡信息展示-->
		<div class="extract-content" v-if="hasCard === true">
			<div class="my-data-list">
				<div class="my-data-list-left">姓名</div>
				<div class="my-data-list-right">{{bankInfo.realName}}</div>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">银行名称</div>
				<div class="my-data-list-right">{{bankInfo.bankName}}</div>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">开户省份</div>
				<div class="my-data-list-right">{{bankInfo.province}}</div>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">开户城市</div>
				<div class="my-data-list-right">{{bankInfo.city}}</div>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">银行卡号</div>
				<div class="my-data-list-right">{{bankInfo.bankCard}}</div>
			</div>
			<van-button class="sub-withdraw" type="info" color="#00459E" block @click="changeBtn">点击进入修改</van-button>
		</div>
		<!--		银行卡信息填写-->
		<div class="extract-content" v-if="hasCard === false">
			<div class="my-data-list">
				<div class="my-data-list-left">代理姓名</div>
				<div class="my-data-list-right">
					<div class="my-data-list-right">{{bankInfo.realName}}</div>
				</div>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">银行名称</div>
				<div class="my-data-list-right" @click="getBankList()">
					<div class="my-data-list-right-left" v-html="bankName"></div>
					<img src="../../../static/images/agent-lowerLevel-arrow.png" alt=""
					     class="my-data-list-right-right">
				</div>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">开户省份</div>
				<div class="my-data-list-right" @click="provinceListShow=true">
					<div class="my-data-list-right-left" v-html="province"></div>
					<img src="../../../static/images/agent-lowerLevel-arrow.png" alt=""
					     class="my-data-list-right-right">
				</div>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">开户城市</div>
				<div class="my-data-list-right" @click="showCitiesList">
					<div class="my-data-list-right-left" v-html="city"></div>
					<img src="../../../static/images/agent-lowerLevel-arrow.png" alt=""
					     class="my-data-list-right-right">
				</div>
			</div>
			<div class="my-data-list">
				<div class="my-data-list-left">银行卡号</div>
				<van-field class="my-data-list-right my-data-list-right2" type="number" v-model="bankCard"
				           placeholder="请输入银行卡号" input-align="right"/>
			</div>
			<van-button class="sub-withdraw" type="info" color="#00459E" block @click="subChangeCard">提交</van-button>
		</div>
		<!--		银行列表-->
		<van-action-sheet id="dateSwitch" class="date-switch" v-model="bankListShow"
		                  @click-overlay="cancerChosingBank()">
			<div class="date-switch-title">请选择银行</div>
			<div class="date-switch-content">
				<div class="date-switch-content-list" v-for="(item,index) in bankList" @click="chosingBank(index)">
					<div class="left">{{item.bankName}}</div>
					<div class="right">
						<div class="blue-point" v-if="isChosingBank===index"></div>
					</div>
				</div>
			</div>
			<van-button class="date-switch-sub" color="#00459E" block @click="subChosingBank">确定</van-button>
		</van-action-sheet>
		<!--		省份列表-->
		<van-action-sheet class="date-switch" v-model="provinceListShow"
		                  @click-overlay="cancerChosingProvince()">
			<div class="date-switch-title">请选择省份</div>
			<div class="date-switch-content">
				<div class="date-switch-content-list" v-for="(item,index) in provinceList" @click="chosingProvince(index)">
					<div class="left">{{ item.name }}</div>
					<div class="right">
						<div class="blue-point" v-if="isChosingProvince===index"></div>
					</div>
				</div>
			</div>
			<van-button class="date-switch-sub" color="#00459E" block @click="subChosingProvince">确定</van-button>
		</van-action-sheet>
		<!--		城市列表-->
		<van-action-sheet class="date-switch" v-model="cityListShow"
		                  @click-overlay="cancerChosingCity()">
			<div class="date-switch-title">请选择城市</div>
			<div class="date-switch-content">
				<div class="date-switch-content-list" v-for="(item,index) in cityList" @click="chosingCity(index)">
					<div class="left">{{ item.name }}</div>
					<div class="right">
						<div class="blue-point" v-if="isChosingCity===index"></div>
					</div>
				</div>
			</div>
			<van-button class="date-switch-sub" color="#00459E" block @click="subChosingCity">确定</van-button>
		</van-action-sheet>
	
	
	</div>
</template>
<script>
import HeaderTop from '../../components/top/top';
import addr from '../../assets/address.json';
import {Dialog, Toast} from 'vant';

export default {
	name: 'bankCardSet',
	components: {
		HeaderTop,
	},
	data() {
		return {
			titleFonts:'银行卡信息',
			anentName: '',
			bankName: '请选择银行',
			province: '请选择开户省份',
			city: '请选择开户城市',
			bankCard: '',
			bankListShow: false,
			provinceListShow: false,
			cityListShow: false,
			bankList: [],
			provinceList: addr,
			cityList: [],
			isChosingBank: 0,
			isChosingProvince: 0,
			isChosingCity: 0,
			provinceChosed:false,
			bankInfo:{},
			bankId:'',
			hasCard:false,
			
		}
	},
	beforeRouteLeave(to, from, next) {    // 销毁组件，避免通过vue-router再次进入时，仍是上次的history缓存的状态
		this.$destroy(true)
		next()
	},
	mounted() {
		this.loadTop()
		// console.log(addr)
	},
	methods: {
		loadTop(){
			this.ServerAPI.postAPI(this.API.bankInfo, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
						if(data.data.bankCard.length === 0){
							this.hasCard = false
						}else if(data.data.bankCard.length > 0){
							this.hasCard = true
							this.bankInfo = data.data
						}
					}else{
						Toast.fail(data.info);
					}
				}else{
					Toast.fail(data.info);
				}
			})
		},
		changeBtn(){
			this.hasCard = false
			this.titleFonts = '银行卡修改'
		},
		getBankList(){
			this.bankListShow = true
			this.ServerAPI.postAPI(this.API.sysBankList, '', (success,data)=>{
				if(success){
					if(data.code === '0000'){
					this.bankList = data.data
					}else{
						Toast.fail(data.info);
					}
				}else{
					Toast.fail(data.info);
				}
			})
		},
		subChangeCard(){
			let params = {
				sysBankId:this.bankId,
				province:this.province,
				city:this.city,
				cardNumber:this.bankCard
			}
			this.ServerAPI.postAPI(this.API.editBank, params, (success,data)=>{
				if(success){
					if(data.code === '0000'){
						Dialog.alert({
							message: '银行卡绑定成功',
							confirmButtonColor:'#00459E'
						}).then(() => {
							// on close
							this.$router.push('/safeCenter')
						});
					}else{
						Toast.fail(data.info);
					}
				}else{
					Toast.fail(data.info);
				}
			})
		},
		chosingBank(value) {
			this.isChosingBank = value
			this.bankName = this.bankList[value].bankName
			this.bankId = this.bankList[value].sysBankId
		},
		cancerChosingBank() {
			this.bankName = '请选择银行'
		},
		subChosingBank() {
			this.bankListShow = false
		},
		chosingProvince(value) {
			this.isChosingProvince = value
			this.province = this.provinceList[value].name
			this.cityList = this.provinceList[value].cities
			// console.log(this.cityList)
		},
		cancerChosingProvince() {
			this.province = '请选择开户省份'
		},
		subChosingProvince() {
			this.city = this.cityList[0].name
			this.provinceListShow = false
			this.provinceChosed = true
		},
		showCitiesList(){
			if(this.provinceChosed === false){
				Dialog.alert({
					message: '请先选择省份',
					confirmButtonColor:'#00459E'
				}).then(() => {
					// on close
				});
				return
			}
			this.cityListShow = true
		},
		chosingCity(value) {
			this.isChosingCity = value
			this.city = this.cityList[value].name
		},
		cancerChosingCity() {
			this.city = '请选择开户城市'
		},
		subChosingCity() {
			this.cityListShow = false
		},
		
		subSet() {
		
		}
		
	}
}
</script>
<style lang="scss" scoped>
.extract-content {
	border-top: rgb(210, 210, 210) 1px solid;
	padding: 0 .2rem;
	
	.my-data-list {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 1rem;
		border-bottom: 1px solid #ececec;
		padding: 0 .2rem;
		
		.my-data-list-left {
			color: rgb(46, 46, 46);
			font-size: .28rem;
		}
		
		.my-data-list-right {
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.my-data-list-right-left {
				flex: .6rem;
				color: #191D2A;
				margin-right: .2rem;
				
				img {
					width: .8rem;
					height: .8rem;
				}
				
				.adress-line1 {
					width: 3.5rem;
					height: 50%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.adress-current {
						width: .6rem;
						height: .35rem;
						text-align: center;
						line-height: .35rem;
						font-size: .24rem;
						color: #FFFFFF;
						background: #D6353F;
						border-radius: .05rem;
					}
				}
			}
			
			.my-data-list-right-right {
				height: .25rem;
			}
		}
		
		.my-data-list-right2 {
			width: 68%;
			padding-right: 0;
		}
		
		.my-data-list-right3 {
			width: 68%;
			text-align: right;
			
			.my-data-list-right-left {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}
	
	.sub-withdraw {
		width: 80%;
		margin: 1rem auto 0;
		border-radius: .15rem;
	}
}

.date-switch {
	//height: 6rem;
	padding: 0 .25rem .3rem;
	color: rgb(46, 46, 46);
	font-size: .28rem;
	
	.date-switch-title {
		height: 1rem;
		line-height: 1rem;
		text-align: center;
		font-weight: bold;
		border-bottom: rgb(210, 210, 210) 1px solid;
	}
	
	.date-switch-content {
		padding: 0 .3rem;
		max-height: 5rem;
		overflow-y: auto;
		
		.date-switch-content-list {
			height: .8rem;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.right {
				width: 16px;
				height: 16px;
				border-radius: 50%;
				border: rgb(83, 83, 83) 1px solid;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.blue-point {
					height: 12px;
					width: 12px;
					border-radius: 50%;
					background: rgb(0, 71, 157);
				}
			}
		}
	}
	
	.date-switch-sub {
		width: 80%;
		margin: .3rem auto 0;
	}
}
</style>
